<div class="options-tab">
  <mat-list class="options-content">
    <form>

      <mat-list-item>
        <mat-form-field>
          <textarea matInput placeholder="Description" matTextareaAutosize [value]="descriptionInput$ | async" (keyup)="onChange($event.currentTarget.value)"></textarea>
        </mat-form-field>
      </mat-list-item>

      <mat-list-item>
        <mat-checkbox matListIcon [checked]="isChecked$ | async" (change)="onClick($event.checked)"></mat-checkbox>
        <span matLine>Is Distinct (maybe help reduce duplicate rows). Read
          <a href="https://docs.djangoproject.com/en/2.0/ref/models/querysets/#django.db.models.query.QuerySet.distinct" target="_blank">more
          </a>.
        </span>
      </mat-list-item>

      <mat-list-item>
        <mat-icon matListIcon (click)="onDelete($event)">delete</mat-icon>
        <a matLine href="#" alt="Delete this report" (click)="onDelete($event)">Delete this report</a>
      </mat-list-item>

      <mat-list-item *ngIf="report" (click)="this.copyReport($event)">
        <mat-icon matListIcon>content_copy</mat-icon>
        <a matLine href="/report_builder/report/{{report.id}}/create_copy/">Copy this report</a>
      </mat-list-item>
    </form>
  </mat-list>
</div>
